<template>
	<view class="content">
		<bgyx-nav-bar>
			<div slot="left">
				<image :src="`/static/images/link${$store.state.websocket.connectState ? 's' : 'f'}.png`"
					style="width: 60rpx;height: 60rpx;" mode=""></image>
			</div>
			<div slot="default">
				<b style="font-size: 32rpx;">通讯录({{Object.keys(friends).length}})</b>
			</div>
			<view slot="right" style="display: flex;justify-content: flex-end;align-items: center;">
				<image @click="makeGroup" style="width: 43rpx;height: 43rpx;margin-right: 20rpx;margin-top: 5rpx;" src="/static/images/icon_addgroup.png" />
				<image @click="addUser" style="width: 40rpx;height: 40rpx;" src="/static/images/icon_adduserx.png" />
			</view>
		</bgyx-nav-bar>
		<view style="display: flex;flex-direction: column; width: 750rpx;z-index: 99;background: white;padding: 16rpx 16rpx 0rpx 16rpx;">
			<view @click="addUser" class="list-cell" style="padding: 0px;">
				<image src="/static/images/icon_adduser.png" style="width: 100rpx;height: 100rpx;"
					mode=""></image>
				<view class="name-view" style="font-weight: bold;display: flex;justify-content: space-between;">
					<span>添加好友</span>
					<view style="padding-right: 16rpx;">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
			<view @click="goApplyPage" class="list-cell" style="padding: 0px;">
				<view style="position: relative;">
					<image src="/static/images/icon_msguser.png" style="width: 100rpx;height: 100rpx;"
						mode=""></image>
						<u-badge :offset="[2,2]" type="error" :count="apply"></u-badge>
				</view>
				<view class="name-view" style="border: none;font-weight: bold;display: flex;justify-content: space-between;">
					<span>好友申请</span>
					<view style="padding-right: 16rpx;">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
		</view>
		<u-index-list :sticky="false" :scrollTop="scrollTop" :index-list="Object.keys(friends)">
			<view style="width: 750rpx;" v-if="friends[item]" v-for="(item, index) in Object.keys(friends)" :key="index">
				<u-index-anchor :index="item" />
				<!-- <view style="width: 100%;height: 10rpx;"></view> -->
				<view @click="goFriendInfo(friend)" v-for="(friend,k) in friends[item]" class="list-cell">
					<image :src="friend.avatar" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;"
						mode=""></image>
					<view class="name-view">
						<text>{{friend.name}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view style="width: 100%;height: 10rpx;"></view> -->
			</view>
		</u-index-list>

		<u-tabbar></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState({
				// 从state中拿到数据 箭头函数可使代码更简练
				friends: state => {
					const data = state.address.friends
					const obj = {}
					for(let o of data){
						if(obj[o.name_letter]){
							obj[o.name_letter].push(o)
						}else{
							obj[o.name_letter] = [o]
						}
					}
					console.log(999, obj)
					return obj;
				},
				apply: state => {
					return state.address.apply
				}
			})
		},
		onShow() {
			const keys = Object.keys(this.friends)
			if(!this.friends || keys.length == 0){
				this.$store.dispatch(`address/initFriendsAndApplySum`,{})
			}
		},
		methods: {
			makeGroup: function() {
				uni.navigateTo({
					url:"/pages/index/makegroup/index"
				})
			},
			goFriendInfo:function(item){
				uni.navigateTo({
					url:"/pages/address/userinfo/friend?id="+item.id
				})
			},
			goApplyPage: function() {
				uni.navigateTo({
					url:"/pages/address/apply/index"
				})
			},
			addUser:function(){
				uni.navigateTo({
					url:"/pages/address/adduser/index"
				})
			},
			change: function() {
				this.$event.pub(`ces`, 888)
				this.$socket.send({
					type: "text",
					data: "撒旦解放和"
				})
				this.$store.dispatch({
					type: "vuex1/setName",
					payload: "四大护法"
				})
				// this.$store.dispatch({
				// 	type:"vuex0/setName",
				// 	payload:"等等"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
		border-bottom: 1rpx solid #e3e3e355;
	}

	.name-view {
		margin-left: 16rpx;
		
		flex: 1;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>